<template>
	<view class="sign-item" @click="signFn">
		<view class="head">
			<view class="cart-code">
				{{signInfo.carNumber}}
			</view>
			<view class="cart-info">
				<view class="company">
					{{signInfo.transportCompanyName}}
				</view>
				<view class="type-btns">
					<!-- type="danger" -->
					<Button2 class="btn">{{signInfo.energyType}}</Button2>
					<Button2 class="btn" v-if="signInfo.directory=='名录车'">{{signInfo.directory}}</Button2>
					<Button2 class="btn" type="danger" v-if="signInfo.directory=='非名录车'">{{signInfo.directory}}
					</Button2>
					<Button2 class="btn" type="danger" v-if="signInfo.internalFlag=='内转车'">{{signInfo.internalFlag}}
					</Button2>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="top">
				<view class="left">
					<Button2 class="btn" :isBorder="false">发往</Button2>

					<view class="addr">
						<!-- {{signInfo.startingPlace}} -->
						<text v-if="signInfo.terminusFieldArea=='4'">原料区</text>
						<text v-if="signInfo.terminusFieldArea=='5'">生产区</text>
						<text v-if="signInfo.terminusFieldArea=='6'">成品区</text>
						<!-- <text v-if="!signInfo.terminusFieldArea" style="font-size: 24rpx;">{{signInfo.startingPlace}}</text> -->
					</view>
				</view>
				<view class="signed" v-if="signInfo.orderStatus">
					{{signInfo.orderStatus}}
				</view>
			</view>
			<view class="items">
				<view class="item">
					<view class="title">
						出发时间
					</view>
					<view class="val">
						{{signInfo.startingTime}}
					</view>
				</view>

				<view class="item">
					<view class="title">
						{{signInfo.rockName}}
					</view>
					<view class="val">
						{{signInfo.actualVolume}}
					</view>
				</view>
				<view class="item">
					<view class="title">
						发料人
					</view>
					<view class="val">
						{{signInfo.senderName}}
					</view>
				</view>
				<view class="item">
					<view class="title">
						收料人
					</view>
					<view class="val">
						{{signInfo.receiveName}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import Button2 from "@/components/button2/button2.vue";
	const emits = defineEmits(['signBtnClick', 'signClick'])
	const props = defineProps({
		signInfo: {
			type: Object,
			default: () => ({})
		}
	})

	// item点击
	function signFn() {
		// console.log(props.signInfo);
		emits('signClick', props.signInfo)
	}
</script>

<style scoped lang="scss">
	.sign-item {
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		background-color: #fff;

		.head {
			display: flex;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid rgba(156, 159, 163, 0.1);

			.cart-code {
				margin-right: 16rpx;
				width: 240rpx;
				height: 96rpx;
				font-size: 40rpx;
				color: #fff;
				text-align: center;
				line-height: 96rpx;
				background: linear-gradient(270deg, #6BA8FA 0%, #2E87FF 100%);
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
				border-radius: 8rpx 0rpx 52rpx 0rpx;
			}

			.cart-info {
				.company {
					font-size: 24rpx;
					margin: 12rpx 0rpx;
				}

				.btn {
					margin-right: 8rpx;
				}

			}
		}

		.content {
			padding: 20rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;

					.btn {
						margin-right: 12rpx;
					}
				}


				.signed {
					transform: rotate(45deg);
					width: 80rpx;
					height: 80rpx;
					font-size: 20rpx;
					color: $primary-color;
					line-height: 80rpx;
					text-align: center;
					border-radius: 50%;
					background: rgba(46, 135, 255, 0.1);
				}
			}

			.items {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				margin-top: 12rpx;

				.item {
					margin-top: 12rpx;
					width: 318rpx;
					height: 100rpx;
					padding: 14rpx 24rpx 20rpx;
					font-size: 24rpx;
					background: #EFF6FE;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					box-sizing: border-box;

					.title {
						margin-bottom: 10rpx;
						color: #989DA5;

					}
				}
			}
		}


	}
</style>